<template>
	<view :style="viewColor">
		<view class='my-promotion'>
			<!-- 顶部银行卡风格区域 -->
			<view class="header-wrapper">
				<view class="header-bg"></view>
				<view class="header-content">
					<!-- 备用：等级信息展示 -->
					<!-- <view class='name acea-row row-center-wrapper'>
						<view class="c-white fw">可提现佣金</view>
						<text @click="showProtocol=true" class="iconfont wenhao">?</text>
						<navigator v-if="userInfo.brokerage && userInfo.show_brokerage" url='/pages/users/user_brokerage/index' hover-class="none" class='record area-row row-middle'>
							<image v-if="userInfo.brokerage.brokerage_icon" class="level_icon" :src="userInfo.brokerage.brokerage_icon"></image>
							<image v-else class="level_icon" src="../static/images/level_avatar.png"></image>
							<text>{{userInfo.brokerage.brokerage_name}}</text>
							<text class='iconfont icon-xiangyou'></text>
						</navigator>
					</view> -->
					
					<!-- 银行卡样式主卡片 -->
					<view class="bank-card">
						<view class="card-pattern"></view>
						<view class="card-chip"></view>
						
						<view class="card-top">
							<view class="card-logo">佣金账户</view>
							<text @click="showProtocol=true" class="card-help-icon">?</text>
						</view>
						
						<view class="card-main">
							<view class="balance-info">
								<view class="balance-label">可提现余额（元）</view>
								<view class="balance-amount">
									<text class="currency">¥</text>
									<text class="amount">{{userInfo.brokerage_price || 0.00}}</text>
								</view>
							</view>
						</view>
						
						<view class="card-bottom">
							<view class="card-item">
								<view class="item-label">待结算</view>
								<view class="item-value">¥{{userInfo.lock_brokerage || 0.00}}</view>
							</view>
							<view class="card-item">
								<view class="item-label">昨日收益</view>
								<view class="item-value">¥{{userInfo.yesterday_brokerage || 0.00}}</view>
							</view>
							<navigator url='/pages/users/user_spread_money/index?type=1' hover-class="none" class="card-item">
								<view class="item-label">
									<text>累计已提</text>
									<text class='iconfont icon-xiangyou mini-arrow'></text>
								</view>
								<view class="item-value">¥{{userInfo.total_extract || 0.00}}</view>
							</navigator>
						</view>
						
						<!-- 提现按钮（放在卡片内） -->
						<!-- #ifdef APP-PLUS || H5 -->
						<navigator url="/pages/users/user_cash/index" hover-class="none" class='withdraw-btn-in-card'>
							<text class="btn-icon">💰</text>
							<text class="btn-text">立即提现</text>
						</navigator>
						<!-- #endif -->
						<!-- #ifdef MP -->
						<view @click="openSubscribe('/pages/users/user_cash/index')" class='withdraw-btn-in-card'>
							<text class="btn-icon">💰</text>
							<text class="btn-text">立即提现</text>
						</view>
						<!-- #endif -->
					</view>
					
					<!-- 备用：其他金额显示方式 -->
					<!-- 可提现金额 -->
					<!-- <view class='num'>{{userInfo.brokerage_price || 0.00}}</view> -->
					<!-- 总金额 -->
					<!-- <view class='num'>{{userInfo.total_brokerage_price}}</view> -->
				</view>
			</view>
			
			<!-- 功能菜单 -->
			<view class='function-menu'>
				<navigator url='/pages/extend/user/spread_code' hover-class="none" class='menu-item'>
					<view class="menu-icon-wrapper orange-gradient">
						<text class='iconfont icon-erweima menu-icon'></text>
					</view>
					<view class="menu-label">推广码</view>
				</navigator>
				
				<navigator url='/pages/users/promoter-list/index' hover-class="none" class='menu-item'>
					<view class="menu-icon-wrapper blue-gradient">
						<text class='iconfont icon-tongji menu-icon'></text>
					</view>
					<view class="menu-label">推广人统计</view>
				</navigator>
				
				<navigator url='/pages/users/user_spread_money/index?type=2' hover-class="none" class='menu-item'>
					<view class="menu-icon-wrapper green-gradient">
						<text class='iconfont icon-qiandai menu-icon'></text>
					</view>
					<view class="menu-label">佣金明细</view>
				</navigator>
				
				<!-- 备用：推广人订单 -->
				<!-- <navigator url='/pages/users/promoter-order/index' hover-class="none" class='menu-item'>
					<view class="menu-icon-wrapper red-gradient">
						<text class='iconfont icon-dingdan menu-icon'></text>
					</view>
					<view class="menu-label">推广人订单</view>
				</navigator> -->
				
				<navigator url='/pages/users/promoter_rank/index' hover-class="none" class='menu-item'>
					<view class="menu-icon-wrapper purple-gradient">
						<text class='iconfont icon-paihang1 menu-icon'></text>
					</view>
					<view class="menu-label">推广人排行</view>
				</navigator>
				
				<!-- 备用：佣金排行 -->
				<!-- <navigator v-if="false" url='/pages/users/commission_rank/index' hover-class="none" class='menu-item'>
					<view class="menu-icon-wrapper red-gradient">
						<text class='iconfont icon-paihang menu-icon'></text>
					</view>
					<view class="menu-label">佣金排行</view>
				</navigator> -->
				
				<!-- 备用：商会收益 -->
				<!-- <navigator url='/pages/extend/chamber/chamber_earnings' hover-class="none" class='menu-item'>
					<view class="menu-icon-wrapper gold-gradient">
						<text class='iconfont icon-shujutongji1 menu-icon'></text>
					</view>
					<view class="menu-label">商会收益</view>
				</navigator> -->
			</view>
		</view>
		
		<!-- 佣金说明弹窗 -->
		<view class="instructions" v-if="showProtocol" @click.self="showProtocol = false">
			<view class="protocol-modal">
				<view class="modal-header">
					<view class="modal-title">佣金说明</view>
					<text class="iconfont icon-cha close-icon" @click="showProtocol = false"></text>
				</view>
				<view class="modal-content">
					<jyf-parser :html="protocol" ref="article" :tag-style="tagStyle"></jyf-parser>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		spreadInfo,
		commissionDescription
	} from '@/api/user.js';
	import {
		openEextractSubscribe
	} from '@/utils/SubscribeMessage.js';
	import {
		mapGetters
	} from "vuex";
	import parser from "@/components/jyf-parser/jyf-parser";
	import {
		toLogin
	} from '@/libs/login.js';
	export default {
		components: {
			"jyf-parser": parser,
		},
		data() {
			return {
				userInfo: [],
				yesterdayPrice: 0.00,
				protocol: '',
				showProtocol: false,
				tagStyle: {
					img: 'width:100%;display:block;',
					video: 'width:100%;'
				},
			};
		},
		computed: mapGetters(['isLogin', 'viewColor']),
		onLoad() {
			if (this.isLogin) {
				this.spreadInfo();
				this.getCommissionDescription();
			} else {
				toLogin()
			}
		},
		methods: {
			// 获取佣金说明
			getCommissionDescription() {
				commissionDescription().then(res => {
					if (res.status == 200) {
						this.protocol = res.data.sys_extension_agree
					}
				})
			},
			openSubscribe: function(page) {
				uni.showLoading({
					title: '正在加载',
				})
				openEextractSubscribe().then(res => {
					uni.hideLoading();
					uni.navigateTo({
						url: page,
					});
				}).catch(() => {
					uni.hideLoading();
				});
			},
			/**
			 * 获取佣金数据
			 */
			spreadInfo: function() {
				let that = this;
				spreadInfo().then(res => {
					that.$set(that, 'userInfo', res.data);
				}).catch((err) => {
					that.$util.Tips({
						title: err,
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/user/index',
						});
					}, 1000)
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f5f6fa;
	}

	.my-promotion {
		min-height: 100vh;
		background-color: #f5f6fa;
	}

	/* 顶部区域 */
	.header-wrapper {
		position: relative;
		padding-bottom: 40rpx;
	}

	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 480rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 0 0 40rpx 40rpx;
	}

	.header-content {
		position: relative;
		padding: 40rpx 30rpx 0;
	}

	/* 银行卡样式 */
	.bank-card {
		position: relative;
		background: linear-gradient(135deg, #434343 0%, #000000 100%);
		border-radius: 28rpx;
		padding: 40rpx 36rpx 36rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.4);
		overflow: hidden;
		
		/* 卡片纹理背景 */
		&::before {
			content: '';
			position: absolute;
			top: -50%;
			right: -20%;
			width: 400rpx;
			height: 400rpx;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
			border-radius: 50%;
		}
		
		&::after {
			content: '';
			position: absolute;
			bottom: -30%;
			left: -10%;
			width: 350rpx;
			height: 350rpx;
			background: radial-gradient(circle, rgba(255, 184, 0, 0.15) 0%, transparent 70%);
			border-radius: 50%;
		}
	}

	.card-pattern {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0.05;
		background-image: repeating-linear-gradient(
			45deg,
			transparent,
			transparent 20rpx,
			rgba(255, 255, 255, 0.03) 20rpx,
			rgba(255, 255, 255, 0.03) 40rpx
		);
	}

	.card-chip {
		position: absolute;
		top: 40rpx;
		left: 36rpx;
		width: 56rpx;
		height: 44rpx;
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		border-radius: 8rpx;
		z-index: 1;
		
		&::before {
			content: '';
			position: absolute;
			top: 8rpx;
			left: 8rpx;
			right: 8rpx;
			bottom: 8rpx;
			border: 1rpx solid rgba(0, 0, 0, 0.2);
			border-radius: 4rpx;
		}
		
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 18rpx;
			height: 2rpx;
			background: rgba(0, 0, 0, 0.3);
			box-shadow: 0 6rpx 0 rgba(0, 0, 0, 0.3), 0 -6rpx 0 rgba(0, 0, 0, 0.3);
		}
	}

	.card-top {
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 44rpx;
	}

	.card-logo {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		font-weight: 500;
		letter-spacing: 2rpx;
		padding: 6rpx 16rpx;
		background: rgba(255, 255, 255, 0.08);
		border-radius: 8rpx;
		backdrop-filter: blur(10rpx);
	}

	.card-help-icon {
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		background: rgba(255, 255, 255, 0.15);
		color: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		font-size: 28rpx;
		font-weight: bold;
		backdrop-filter: blur(10rpx);
	}

	.card-main {
		position: relative;
		z-index: 2;
		margin-bottom: 40rpx;
	}

	.balance-info {
		margin-bottom: 12rpx;
	}

	.balance-label {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.7);
		margin-bottom: 12rpx;
		letter-spacing: 1rpx;
	}

	.balance-amount {
		display: flex;
		align-items: baseline;
	}

	.currency {
		font-size: 38rpx;
		color: #FFB800;
		font-weight: 600;
		margin-right: 6rpx;
	}

	.amount {
		font-size: 64rpx;
		color: #fff;
		font-weight: 800;
		font-family: DIN, -apple-system, BlinkMacSystemFont, sans-serif;
		letter-spacing: 2rpx;
	}

	.card-bottom {
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		padding-top: 28rpx;
		border-top: 1rpx solid rgba(255, 255, 255, 0.1);
	}

	.card-item {
		flex: 1;
		text-align: center;
		
		&:not(:last-child) {
			border-right: 1rpx solid rgba(255, 255, 255, 0.1);
		}
	}

	.item-label {
		font-size: 22rpx;
		color: rgba(255, 255, 255, 0.65);
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4rpx;
	}

	.mini-arrow {
		font-size: 18rpx;
		color: rgba(255, 255, 255, 0.65);
	}

	.item-value {
		font-size: 30rpx;
		color: #fff;
		font-weight: 700;
		font-family: DIN, -apple-system, BlinkMacSystemFont, sans-serif;
	}

	/* 卡片内提现按钮 */
	.withdraw-btn-in-card {
		position: relative;
		z-index: 2;
		margin-top: 32rpx;
		background: linear-gradient(135deg, #FFB800 0%, #FF8C00 100%);
		border-radius: 48rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		box-shadow: 0 12rpx 32rpx rgba(255, 184, 0, 0.4);
		transition: all 0.3s;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
			transition: left 0.5s;
		}
		
		&:active {
			transform: scale(0.98);
			box-shadow: 0 8rpx 24rpx rgba(255, 184, 0, 0.35);
			
			&::before {
				left: 100%;
			}
		}
		
		.btn-icon {
			font-size: 32rpx;
			line-height: 1;
		}
		
		.btn-text {
			color: #fff;
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 4rpx;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
		}
	}

	/* 提现按钮（原外部样式，备用） */
	.withdraw-btn {
		background: linear-gradient(135deg, #FFB800 0%, #FF8C00 100%);
		border-radius: 56rpx;
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		box-shadow: 0 16rpx 48rpx rgba(255, 184, 0, 0.45);
		transition: all 0.3s;
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
			transition: left 0.5s;
		}
		
		&:active {
			transform: scale(0.98);
			box-shadow: 0 8rpx 32rpx rgba(255, 184, 0, 0.35);
			
			&::before {
				left: 100%;
			}
		}
	}

	.btn-icon {
		font-size: 38rpx;
		line-height: 1;
	}

	.btn-text {
		color: #fff;
		font-size: 36rpx;
		font-weight: 700;
		letter-spacing: 6rpx;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
	}

	/* 功能菜单 */
	.function-menu {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30rpx;
		gap: 20rpx;
	}

	.menu-item {
		width: calc((100% - 20rpx) / 2);
		background: #fff;
		border-radius: 24rpx;
		padding: 40rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		// box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s;
		
		&:active {
			transform: translateY(-4rpx);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		}
	}

	.menu-icon-wrapper {
		width: 96rpx;
		height: 96rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	}

	.orange-gradient {
		background: linear-gradient(135deg, #ff9a56 0%, #ff6b35 100%);
	}

	.blue-gradient {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	}

	.green-gradient {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
	}

	.purple-gradient {
		background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
	}

	/* 备用：其他渐变色方案 */
	.red-gradient {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
	}

	.gold-gradient {
		background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
	}

	.menu-icon {
		font-size: 48rpx;
		color: #fff;
	}

	.menu-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	/* 弹窗样式 */
	.instructions {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(4rpx);
	}

	.protocol-modal {
		width: 670rpx;
		max-height: 80vh;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.modal-header {
		position: relative;
		padding: 40rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.close-icon {
		position: absolute;
		right: 32rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 40rpx;
		color: #999;
		padding: 10rpx;
	}

	.modal-content {
		flex: 1;
		overflow-y: auto;
		padding: 40rpx;

		/deep/ p {
			font-size: 28rpx;
			line-height: 48rpx;
			color: #666;
			margin-bottom: 20rpx;
		}

		/deep/ img {
			max-width: 100%;
			border-radius: 12rpx;
			margin: 20rpx 0;
		}
	}
</style>
